<link rel="stylesheet" href="/assets/css/layui.css">
<link rel="stylesheet" href="/assets/css/draggable.css">
<style>
    .layui-tree-entry {
        height: 22px !important;
    }

    .layui-tree-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .layui-tree-iconClick {
        margin: 0 4px;
    }

    .layui-tree-iconClick .layui-icon.layui-icon-file {
        margin-left: -2px;
    }

    .selected {
        background-color: bisque;
    }

    p {
        line-height: 24px;
    }

    .left,.right{
        min-height: 500px;
        max-height:800px;
        overflow-y: auto;
    }
    .container .left .item {
        line-height: 24px;
    }
</style>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2">
        <div class="panel panel-default panel-intro">
            <div class="panel-body">
                <div id="1" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">
                            <div id="test4" class="demo-tree"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-10 col-lg-10">
        <div class="panel panel-default panel-intro">
            <div class="panel-body">
                <div id="myTabContent2" class="tab-content">
                    <div class="tab-pane fade active in" id="two">
                        <div class="widget-body no-padding">

                            <div class="row">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="form-inline">
                                        <select class="form-control semester" name="semester_id" style="width: 120px;">
                                        </select>
                                        <select class="form-control semester_num" name="semester_num">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div id="divcontainer" class="container">
                                <div class="left" data-allowed="true">
                                </div>
                                <div class="right">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="semesterTpl">
    <option value="0">请选择</option>
    <% for(var i=0; i< data.length; i++){ %>
    <option value="<%=data[i].id%>"><%=data[i].name%></option>
    <% } %>
</script>
<script type="text/html" id="studentTpl">
    <% for(var i=0; i< data.length; i++){ %>
    <% var value = data[i]; %>
    <div class="color1" style="text-align: center; margin: 5px; padding: 5px;" >
        <a href="javascript:;" data-id="<%=value.id%>" class="student"><%=value.name%></a>
    </div>
    <% } %>
</script>
<script type="text/html" id="classroomTpl">
    <table>
        <colgroup>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <td></td>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
        </thead>
        <tbody>

        <% for(i in data){ %>
        <tr>
            <th class="span"><%=i%></th>
            <% for(j in data[i]){ %>
            <td>
                <% if(data[i][j] && data[i][j].class_name){ %>
                <div draggable="true" class="color<%=data[i][j].num%> item">
                    <%=data[i][j].class_name%><br>
                    <%=data[i][j].subject_name%><br>
                    <%=data[i][j].teacher_name%><br>
                    <%=data[i][j].start_time%>-<%=data[i][j].end_time%>
                </div>
                <% } %>
            </td>
            <% } %>
        </tr>
        <% } %>



        </tbody>
    </table>


</script>
